<template>
  <view>
  <view class="flex-col container tab-botton">
    <head-box></head-box>
    <view class="flex-col group">
      <video :src="details.url"
             class="_video"
             controls
             show-mute-btn
             @timeupdate="getTimeupdate"
             :data-videoId="details.id"
             :id="'video' + details.id"
             show-progress
             type="video/mp4"
             controls="controls"
      ></video>
      <view class="flex-col group_1">
        <view class="justify-between group_2">
          <text class="text_1 text_2">{{details.name}}</text>
          <view class="group_3">
            <image src="/static/img/borwer.png" class="image_1" />
            <text class="text_1 text_3">{{details.readTimes}}</text>
          </view>
        </view>
        <view class="justify-between group_4 group_100">
          <view class="group_5">
            <text class="text_1 text_4">发布时间</text>
            <text class="text_1 text_5">{{createTime.start}}</text>
            <text class="text_1 text_6">{{createTime.end}}</text>
          </view>
          <view class="group_6">
            <image src="/static/img/dz.png" class="image_2"  @click=" onLinks"/>
            <text class="text_1 text_7" @click=" onLinks">{{details.dzTimes}}</text>
            <image src="/static/img/zf.png" class="image_3" @tap="onShare" />
          </view>
        </view>
      </view>
    </view>
    <view class="flex-col group_7">
      <view class="flex-col">
        <view class="flex-col group_8">
          <text class="text_1 text_8">详情</text>
          <view class="flex-col group_9">
            <view class="divider"> </view>
            <view class="section_1"> </view>
          </view>
        </view>
        <view class="flex-col group_10">
          <text class="text_9">
            <u-parse
                :html="details && details.content"
                v-if="details && details.content"
            ></u-parse>
          </text>

        </view>
      </view>
    </view>
  </view>
    <tabs-box></tabs-box>
    <!-- 分享 -->
    <pointshare :show="isShow" @close="onClose"></pointshare>
  </view>
</template>

<script>
import pointshare from '@/components/point-share/index'
import {appVisit } from '@/api/app'
import { getRunResourcesBase } from '@/api/training'
// #ifdef H5
import NativeShare from 'nativeshare'
const nativeShare = new NativeShare()
const jweixin = require('js_sdk/jweixin-module/index.js')
// #endif
import { gpUserVideoOperateTimes,addUserVideoOperateTimes,getVideoOperateTimes,gpcancelUserVideoDZ  } from '@/api/video'
import {
  getUpdateDate
} from '@/common/type'
export default {
  components: {
    pointshare,
  },
  data() {
    return {
      isWx: false,
      isShow: false,
      id:null,//详情id
      pageviews: 0, //浏览量
      details:{},//数据
    };
  },
  onLoad(opt) {
    this.id = opt.id
  },
  computed:{
    createTime(){
      return {
        start:this.$moment(this.details?.createTime).format('YYYY-MM-DD'),
        end:this.$moment(this.details?.createTime).format(' HH:mm:ss')
      }
    }
  },
  onShow() {
    // #ifdef H5
    setTimeout(() => {
      const that = this
      this.$wxSetShare({
        title: that.details.name, // 分享标题
        desc:  that.details.name, // 分享描述
        imgUrl:that.details.icon, // 分享图标
      })
    }, 1000)
    // #endif
  },
  mounted() {
    this. getVideoOperateTimes({
      videoId: this.id,
    })
    this.addUserVideoOperateTimes({
      category: '1',
      videoId: this.id,
    })
    this.getRunResourcesBase({
      id: this.id,
    })
  },
  methods:{
    //点赞
    onLinks() {
      if(this.details.myDzTimes>=1){
        gpcancelUserVideoDZ({videoId:this.id}).then((res) =>{
          const {code,message,result} =res
          if(code===200){
            this.$api.msg(result)
            this.getRunResourcesBase({id:this.id})
          } else {
            this.$api.msg(message)
          }
        }).catch(e=>{

        })
      } else {
        this.addUserVideoOperateTimes({
          category: '2',
          videoId: this.id,
        })
      }

    },
    //分享
    onShare() {
      //判断是否微信浏览器
      if (this.isWx) {
        // #ifdef H5
        this.isShow = true
        // #endif
      } else {
        this.getShareData()
      }
      this.addUserVideoOperateTimes({
        category: '3',
        videoId: this.id,
      })
    },
    //关闭
    onClose(e) {
      this.isShow = false
    },
    //第三方分享
    getShareData() {
      const self = this
      const shareData = {
        title: self.details.name, // 分享标题
        desc:  self.details.name, // 分享描述
        // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
        link: window.location.href,
        icon: self.details.icon,
        // 不要过于依赖以下两个回调，很多浏览器是不支持的
        success() {
          self.$api.msg('分享成功')
          uni.setClipboardData({
            data: window.location.href,
            success: (data) => {
              self.$api.msg('已复制到剪切板,请到微信,钉钉等平台粘贴分享')
            },
            fail: (error) => {
              console.log(error, 'fail')
            },
            complete: (res) => {
              console.log(res, 'complete')
            },
          })
        },
        fail() {
          self.$api.msg('分享失败')
        },
        syncDescToTag: true,
        syncIconToTag: true,
        syncTitleToTag: true,
      }
      nativeShare.setShareData(shareData)
      try {
        nativeShare.call()
      } catch (err) {
        // 如果不支持，你可以在这里做降级处理
        uni.setClipboardData({
          data: window.location.href,
          success: (data) => {
            this.$api.msg('已复制到剪切板,请到微信,钉钉等平台粘贴分享')
          },
          fail: (error) => {
            console.log(error, 'fail')
          },
          complete: (res) => {
            console.log(res, 'complete')
          },
        })
      }
    },
    //播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
    getTimeupdate({detail:{currentTime}}){
      if(currentTime>=60){
        appVisit(11)
      }
    },
    //用户视频操作次数-增加1次-1.阅读2.点赞3.分享
    addUserVideoOperateTimes(data) {
      addUserVideoOperateTimes(data)
          .then((res) => {
            const {code,message,result} =res
            if(code===200){
              this.getRunResourcesBase({id:this.id})
            } else {
              this.$api.msg(message)


            }
          })
          .catch((e) => {
            console.log ( e ,123)
            // goLogin()
          })
    },
    //获取视频总操作次数
    getVideoOperateTimes(videoId) {
      getVideoOperateTimes(videoId)
          .then((res) => {
            const { code, result } = res
            if (code === 200) {
              this.pageviews = result.readTimes
            }
          })
          .catch((e) => {
            console.log(e)
          })
    },
    //视频-详情
    getRunResourcesBase(id) {
      getRunResourcesBase(id)
          .then((res) => {
            const { code, result } = res
            if (code === 200) {
              this.getMoveRbDesc(result)
            }
          })
          .catch((e) => {})
    },
    //更新富文本相关
    getMoveRbDesc(result) {
      this.details = result
      const { dateendTime, startTime, endTime, moveDesc } = result
      this.details.dateendTime = getUpdateDate(dateendTime)
      this.details.startTime = getUpdateDate(startTime)
      this.details.endTime = getUpdateDate(endTime)
      this.details.moveDesc = moveDesc
          .replace(/\<img/gi, '<img class="box_img"')
          .replace(/\<p/gi, '<p class="box_p"')
          .replace(/\<span/gi, '<span class="box_span"')
          .replace(/&nbsp;/g, '\xa0')
          .replace(/; width: .*?;/g, '')
    },
  }
};
</script>

<style scoped lang="scss">
video{
  width: 100%;
  height: 342rpx;
}
.container {
  text-transform: none;
  background-position: 0rpx 0rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  .group {
    //padding: 74rpx 17rpx 50rpx 29rpx;
    .text {
      align-self: center;
      color: rgb(34, 34, 34);
      font-size: 30rpx;
      line-height: 30rpx;
      white-space: nowrap;
    }
    .image {
      margin-top: 154rpx;
      align-self: center;
      width: 95rpx;
      height: 95rpx;
    }
    .group_1 {
      padding:0 30rpx;
      padding-top:44rpx;
      .group_2 {
        .text_2 {
          color: rgb(34, 34, 34);
          font-size: 32rpx;
          white-space: nowrap;
          width: 446rpx;
          height: 31rpx;
          font-family: PingFang;
          line-height: 40rpx;
        }
        .group_3 {
          margin-bottom: 3rpx;
          color: rgb(136, 136, 136);
          font-size: 28rpx;
          line-height: 28rpx;
          white-space: nowrap;
          .image_1 {
            margin-bottom: 5rpx;
            width: 31rpx;
            height: 23rpx;
            opacity: 0.6;
            vertical-align: middle;
          }
          .text_3 {
            margin-left: 14rpx;
          }
        }
      }
      .group_4 {
        margin-top: 30rpx;
        .group_5 {
          margin-top: 7rpx;
          .text_4 {
            color: rgb(51, 51, 51);
            font-size: 30rpx;
            white-space: nowrap;
            width: 116rpx;
            height: 29rpx;
            font-weight: 500;
            line-height: 40rpx;
          }
          .text_5 {
            margin: 4rpx 0 3rpx 32rpx;
          }
          .text_6 {
            margin: 4rpx 0 3rpx 3rpx;
          }
          .text_5,.text_6{
            white-space: nowrap;
            height: 23rpx;
            font-size: 30rpx;
            font-family: PingFang;
            font-weight: 500;
            color: #888888;
            line-height: 40rpx;
          }
        }
        .group_6 {
          color: rgb(136, 136, 136);
          font-size: 28rpx;
          white-space: nowrap;
          .image_2 {
            margin-bottom: 4rpx;
            width: 33rpx;
            height: 33rpx;
            vertical-align: middle;
          }
          .text_7 {
            margin-left: 18rpx;
            margin-top: 9rpx;
          }
          .image_3 {
            margin: 3rpx 0 6rpx 43rpx;
            width: 28rpx;
            height: 28rpx;
            vertical-align: middle;
          }
        }
      }
      .group_100{
        padding-bottom: 51rpx;
      }
    }
  }
  .group_7 {
    height: 654rpx;
    border-top: solid 10rpx rgb(238, 238, 238);
    .group_8 {
      padding-top: 43rpx;
      color: rgb(255, 61, 92);
      font-size: 30rpx;
      line-height: 30rpx;
      white-space: nowrap;
      .text_8 {
        align-self: center;
      }
      .group_9 {
        margin-top: 24rpx;
        padding: 2rpx 0 24rpx;
        position: relative;
        .divider {
          background-color: rgb(238, 238, 238);
          height: 2rpx;
        }
        .section_1 {
          background-color: rgb(255, 61, 92);
          border-radius: 2rpx;
          height: 5rpx;
          position: absolute;
          left: 358rpx;
          right: 355rpx;
          top: 0;
        }
      }
    }
    .group_10 {
      padding: 0 26rpx 79rpx 32rpx;
      .text_9 {
        color: rgb(102, 102, 102);
        font-size: 24rpx;
        line-height: 50rpx;
        text-transform: uppercase;
        word-break: break-all;
      }
      .text_11 {
        color: rgb(102, 102, 102);
        font-size: 24rpx;
        line-height: 50rpx;
        white-space: nowrap;
      }
      .text_12 {
        color: rgb(102, 102, 102);
        font-size: 24rpx;
        line-height: 50rpx;
        white-space: nowrap;
      }
    }
  }
  .text_1 {
    text-transform: uppercase;
  }
}
</style>
<style scoped>
@import'@/style/global-css.css'
</style>
